<template>
  <div class="header1">
    <el-col :span="6"><div class="grid-content bg-purple" style="text-align: right ;margin-right:19px"><h4>输入作者:</h4></div></el-col>
    <el-col :span="14"><div class="grid-content bg-purple-light"><el-input placeholder="请输入内容" v-model="input" clearable>
    </el-input></div></el-col>
<el-col :span="6"><div class="grid-content bg-purple" style="text-align:right;margin-right:19px"><h4>上传书本封面:</h4></div></el-col>
  <el-col :span="14"><div class="grid-content bg-purple-light"><el-upload
  class="upload-demo"
  action="https://jsonplaceholder.typicode.com/posts/"
  :on-preview="handlePreview"
  :on-remove="handleRemove"
  :file-list="fileList"
  list-type="picture">
</el-upload></div></el-col>
<el-col :span="6"><div class="grid-content bg-purple" style="text-align: right;margin-right:19px"><h4>上传者名:</h4></div></el-col>
  <el-col :span="14"><div class="grid-content bg-purple-light"><el-input
  placeholder="请输入内容"
  v-model="editer"
  clearable>
</el-input></div></el-col>
<el-col :span="6"><div class="grid-content bg-purple" style="text-align:right;margin-right:19px"><h4>选择书本上传路径:</h4></div></el-col>
  <el-col :span="14"><div class="grid-content bg-purple-light" ><el-upload
  class="upload-demo"
  drag
  action="https://jsonplaceholder.typicode.com/posts/"
  multiple>
  <i class="el-icon-upload"></i>
  <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
</el-upload></div></el-col>
<el-col :span="6"><div class="grid-content bg-purple" style="text-align:right; margin-right:19px"><h4>输入书本简介:</h4></div></el-col>
  <el-col :span="14"><div class="grid-content bg-purple-light"><el-input
  placeholder="请输入内容"
  v-model="introduce"
  clearable>
</el-input></div></el-col>
<el-col  :span="24"><div class="grid-content bg-purple-dark"><el-button style="display: block;
  margin-left: 30%;
  width:20%
  " type="info" plain icon="el-icon-check" ></el-button></div></el-col>
  </div>
</template>

<script>
export default {
  name: "imageUpload",
  data() {
    return {
      input: "",
      editer: "",
      introduce: "",
      fileList: [{name: 'python.jpeg', url: 'https://img-blog.csdnimg.cn/img_convert/1542512dba4c0be45ccf0c9630bbae6e.png'}]
    };
  },
};
</script>

<style scoped>
.header1{
    
		height: 750px;
		margin: 90px;
        border-radius: 20px;
		border: 5px solid #efefef;
   
}
.grid-content{
    margin:25px 10px 10px 10px;
    
}
</style>